格線雜誌

保持彈性篇
display: flex;：
彈性盒子讓作用的標籤內部形成一個彈性盒子空間，內部的子元素會沿著橫向的主軸( main axis )與縱向的交叉軸（cross axis）來排列，這樣的佈局可以用一些樣式來達成因為螢幕寬度不同造成使用者體驗不佳的影響。

復習一下彈性盒子，接下來使用到另一個重頭戲：格線容器（grid container)

從便利商店走回家的路上，細數著每個街區的公寓與社區的數量，這些由橫向與縱向道路所劃分而成的區塊，與爺爺鄉下的家截然不同，這歸功於都市計畫讓市容整整齊齊，也讓我聯想到手上提著微波食品的不織布提袋，今天晚上幹活前的一餐，希望一切能夠照著計劃進行。

格線佈局 (grid)

• display: grid;：
  這個元素宣告為格線容器，這會讓它變成像棋盤一樣，包含一組水平線和垂直線的交叉集合（intersecting set）：一個定義為行（row），另一個定義為列（column）。

• grid-template-columns:：

• grid-template-rows:：
  這兩個語法可以用來定義行跟列的寬與高，稱做格線軌道(Grid Track)。
  例如：

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}
/* 這個元素成為了由 3列 200px寬 組成的格線系統 */

分塊(friction,fr)

由格線系統所引入的單位，簡單來就是這個棋盤中分為幾塊，讓格線容器內能更有彈性的調整寬高。
例如：

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}
/*  這個元素成為了由 4列3區塊組成的格線系統，其中1列佔2fr，2列佔1fr。 */
/*  這裡沒有設定列寬，因此4列會均等地分配容器寬度*/

下篇：雜誌(下)

引用與資源：
freecodecamp
mdn_web_docs_grid
我的格線雜誌